<template>
  <div class="home">
    <!-- 1. 头部 -->
    <MyHead></MyHead>
    <!-- 2. 轮播图 -->
    <div class="home-swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <img :src="banners[index].pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 3. 路由列表 -->
    <ul class="lylist">
      <li v-for="(l, i) in luyou" :key="i" @click="toWhere(luyou[i].where)">
        <img :src="luyou[i].img" alt="" />
        <p>{{ l.name }}</p>
      </li>
    </ul>
    <!-- 4. 新歌推荐 -->
    <div class="songlist-view" @click="toWhere('/artist')">
      <div class="songlist-title">
        <h1 v-if="all[2]">{{ all[2].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="songlist-box">
        <li v-for="(l, i) in song" :key="i">
          <img class="simg" :src="song[i].pic" alt="" />
          <div class="song-info">
            <h2>{{ song[i].albumTitle }}</h2>
            <p>{{ song[i].artist[0].name }}</p>
          </div>
          <div class="iimg_box">
            <img
              class="iimg"
              src=""
              alt=""
            />
          </div>
        </li>
      </ul>
    </div>
    <!-- 5. 最新专辑 -->
    <div class="albumlist-view" @click="toWhere('/toplist')">
      <div class="albumlist-title">
        <h1 v-if="all[3]">{{ all[3].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="albumlist-box">
        <li v-for="(l, i) in album" :key="i">
          <img :src="album[i].pic" alt="" />
          <h2>{{ album[i].title }}</h2>
          <p v-if="album[i].artist">{{ album[i].artist[0].name }}</p>
          <img
            class="play"
            src=""
            alt=""
          />
        </li>
      </ul>
    </div>
    <!-- 6. 推荐歌单 -->
    <div class="tracklist-view" @click="toWhere('/category')">
      <div class="tracklist-title">
        <h1 v-if="all[4]">{{ all[4].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="tracklist-box">
        <li v-for="(l, i) in tracklist" :key="i">
          <img :src="tracklist[i].pic" alt="" />
          <h2>{{ tracklist[i].title }}</h2>
          <p>{{ tracklist[i].trackCount }}首单曲</p>
          <img
            class="play"
            src=""
            alt=""
          />
        </li>
      </ul>
    </div>
    <!-- 7. 流派歌单 -->
    <div class="tracklist_tag-view" @click="toWhere('/category')">
      <div class="tracklist_tag-title">
        <h1 v-if="all[5]">{{ all[5].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="tracklist_tag-box">
        <li v-for="(l, i) in tracklist_tag" :key="i">
          <img
            :src="`https://c-qianqian.91q.com/res/assets_file/assets/liupai_${l.categoryId}.png`"
            alt=""
          />
          <h2>{{ l.categoryName }}</h2>
        </li>
      </ul>
    </div>
    <!-- 8. 推荐歌手 -->
    <div class="ballad-view" @click="toWhere('/artist')">
      <div class="ballad-title">
        <h1 v-if="all[6]">{{ all[6].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="ballad-box">
        <li v-for="(l, i) in artist" :key="i">
          <img :src="artist[i].pic" alt="" />
          <h2>{{ artist[i].name }}</h2>
          <p>{{ artist[i].favoriteCount | playvolume }}人已收藏</p>
          <img
            class="play"
            src=""
            alt=""
          />
        </li>
      </ul>
    </div>
    <!-- 9. 精选视频 -->
    <div class="video-view">
      <div class="video-title">
        <h1 v-if="all[7]">{{ all[7].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="video-box">
        <li v-for="(l, i) in video" :key="i">
          <img :src="video[i].pic" alt="" />
          <h2>{{ video[i].title }}</h2>
          <p>{{ video[i].artist[0].name }}</p>
          <img
            class="play"
            src=""
            alt=""
          />
        </li>
      </ul>
    </div>
    <!-- 10. 民谣 -->
    <div class="ballad-view">
      <div class="ballad-title">
        <h1 v-if="all[8]">{{ all[8].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="ballad-box">
        <li v-for="(l, i) in ballad" :key="i">
          <img :src="ballad[i].pic" alt="" />
          <h2>{{ ballad[i].title }}</h2>
          <p>{{ ballad[i].trackCount }}首单曲</p>
          <img
            class="play"
            src=""
            alt=""
          />
        </li>
      </ul>
    </div>
    <!-- 11. 说唱 -->
    <div class="rap-view">
      <div class="rap-title">
        <h1 v-if="all[9]">{{ all[9].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="rap-box">
        <li v-for="(l, i) in rap" :key="i">
          <img :src="rap[i].pic" alt="" />
          <h2>{{ rap[i].title }}</h2>
          <p>{{ rap[i].trackCount }}首单曲</p>
          <img
            class="play"
            src=""
            alt=""
          />
        </li>
      </ul>
    </div>
    <!-- 12. 布鲁斯 -->
    <div class="bruce-view">
      <div class="bruce-title">
        <h1 v-if="all[10]">{{ all[10].module_name }}</h1>
        <p>更多</p>
      </div>
      <ul class="bruce-box">
        <li v-for="(l, i) in bruce" :key="i">
          <img :src="bruce[i].pic" alt="" />
          <h2>{{ bruce[i].title }}</h2>
          <p>{{ bruce[i].trackCount }}首单曲</p>
          <img
            class="play"
            src=""
            alt=""
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import MyHead from "../../components/MyHead.vue";
import { getHomeAll } from "./service";
export default {
  components: {
    MyHead,
  },
  data() {
    return {
      categoryId: "",
      luyou: [
        {
          name: "歌手",
          img: "https://static2-qianqian.91q.com/client/img/f8959c1.png",
          where: "/artist",
        },
        {
          name: "榜单",
          img: "https://static2-qianqian.91q.com/client/img/64ca4c5.png",
          where: "/toplist",
        },
        {
          name: "分类歌单",
          img: "https://static2-qianqian.91q.com/client/img/0906f63.png",
          where: "/category",
        },
      ],
      all: [],
      banners: [], // [0]
      song: [], // 4. 新歌推荐 [2]
      album: [], // 5. 最新专辑 [3]
      tracklist: [], // 6. 推荐歌单 [4]
      tracklist_tag: [], // 7. 流派歌单 [5]
      artist: [], // 8. 推荐歌手 [6]
      video: [], // 9. 精选视频 [7]
      ballad: [], // 10. 民谣 [8]
      rap: [], // 11. 说唱 [9]
      bruce: [], // 12. 布鲁斯 [10]
    };
  },
  methods: {
    async initData() {
      const { data } = (await getHomeAll()) || {};
      this.all = data;
      this.banners = data[0].result;
      this.song = data[2].result;
      this.album = data[3].result;
      this.tracklist = data[4].result;
      this.tracklist_tag = data[5].result;
      this.artist = data[6].result;
      this.video = data[7].result;
      this.ballad = data[8].result;
      this.rap = data[9].result;
      this.bruce = data[10].result;
      console.log("all", this.all);
    },
    toWhere(where) {
      this.$router.push(where);
    },
  },
  filters: {
    //取截单元,单位
    playvolume: function (arg) {
      const volume = arg / 10000;
      const realVal = parseFloat(volume).toFixed(2);
      return realVal + "万";
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="less" scoped>
@import "styles/index.less";
// 去掉滚动条
.video-box::-webkit-scrollbar,
.tracklist_tag-box::-webkit-scrollbar,
.bruce-box::-webkit-scrollbar,
.rap-box::-webkit-scrollbar,
.ballad-box::-webkit-scrollbar,
.tracklist-box::-webkit-scrollbar,
.songlist-box::-webkit-scrollbar,
.albumlist-box::-webkit-scrollbar {
  display: none;
}
.home {
  .padding-bottom(60);
  .w(375);
  background: #000;
  // 2. 轮播图
  .home-swiper {
    .margin-top(80);
    .w(375);
    .h(130);
    .my-swipe {
      .w(375);
      .h(130);
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  // 3. 路由列表
  .lylist {
    .w(375);
    .h(123);
    .padding(0,20,0,20);
    .margin-top(10);
    .margin-bottom(35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        .w(92);
        .h(92);
      }
      p {
        color: #fff;
        .margin-top(10);
        font-size: 13px;
      }
    }
  }
  // 4. 新歌推荐
  .songlist-view {
    .padding-left(20);
    // .w(375);
    .h(308);
    .songlist-title {
      .more();
    }
    .songlist-box {
      // .w(375);
      overflow-x: scroll;
      .h(265);
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      li {
        display: flex;
        justify-content: space-between;
        .margin(0,20,12,0);
        .simg {
          display: block;
          .w(75);
          .h(75);
          .border-radius(10);
          .margin-right(15);
        }
        .song-info {
          display: flex;
          flex-direction: column;
          // align-items: center;
          justify-content: center;
          h2 {
            display: block;
            .w(162);
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-word;
            color: #fff;
            .line-height(24);
          }
          p {
            font-size: 12px;
            color: #909399;
            .padding-top(4);
          }
        }
        .iimg_box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .iimg {
            .w(28);
            .h(28);
            .margin-right(10);
          }
        }
      }
    }
  }
  // 5. 最新专辑
  .albumlist-view {
    .padding-left(20);
    .h(250);
    .albumlist-title {
      .more();
    }
    .albumlist-box {
      .mbox();
    }
  }
  // 6. 推荐歌单
  .tracklist-view {
    .padding-left(20);
    .h(250);
    .tracklist-title {
      .more();
    }
    .tracklist-box {
      .mbox();
    }
  }
  // 7. 推荐歌单
  .tracklist-view {
    .padding-left(20);
    .h(250);
    .tracklist-title {
      .more();
    }
    .tracklist-box {
      .mbox();
    }
  }
  // 8. 流派歌单
  .tracklist_tag-view {
    .padding-left(20);
    // .h(250);
    .tracklist_tag-title {
      .more();
    }
    .tracklist_tag-box {
      overflow-x: scroll;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      .h(255);
      li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        .margin-right(15);
        .margin-bottom(15);
        img {
          .w(70);
          .h(70);
          border-radius: 50%;
        }
        h2 {
          font-size: 13px;
          color: #fff;
          font-weight: 600;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          .margin-top(18);
        }
      }
    }
  }
  // 9. 视频
  .video-view {
    .padding-left(20);
    .h(250);
    .video-title {
      .more();
    }
    .video-box {
      .mbox2();
    }
  }
  // 10. 民谣
  .ballad-view {
    .padding-left(20);
    .h(250);
    .ballad-title {
      .more();
    }
    .ballad-box {
      .mbox();
    }
  }
  // 11. 说唱
  .rap-view {
    .padding-left(20);
    .h(250);
    .rap-title {
      .more();
    }
    .rap-box {
      .mbox();
    }
  }
  // 12. 布鲁斯
  .bruce-view {
    .padding-left(20);
    .h(250);
    .bruce-title {
      .more();
    }
    .bruce-box {
      .mbox();
    }
  }
}
</style>
